<template>
	<view>
		<scroll-view scroll-x class="bg-white nav tab-view" scroll-with-animation :scroll-left="scrollLeft">
		    <view
		        :class="'cu-item ' + (id == item.id ? 'text-blue cur' : '')"
				v-for="(item,index) in clist"
		        :key="index"
		        :data-id="item.id"
		        @click.stop.prevent="tabSelect"
		    >
		        {{ item.name }}
		    </view>
		
		</scroll-view>
		
		<view class="cu-bar bg-white solid-bottom">
			<view class="action">
				<text class="cuIcon-title text-blue"></text>
				 二级分类
				 <text class="cuIcon-info text-gray" @click="clickShowModal(true)"></text>
			</view>
			<view class="action">
				<text class='text-blue' @click="addTwoClass">添加</text>
			</view>
		</view>
		
		<view v-if="twoClassData.length == 0" class="my-nodata">
			<image src="../static/no-data.png"></image>
			<view  >
				没有数据
			</view>
		</view>
		
		<view class="cu-list menu sm-border  margin-top" >
			
			<view class="cu-item " v-for="(item,index) in twoClassData" :key="index">
				<view class="content">
					<text class="text-black">{{item.name}}</text>
				</view>
				<view class="content guoshao-text" >
					<text class="text-grey " v-if="item.status == 0">审核中</text>
					<text class="text-green " v-if="item.status == 1">已通过</text>
					<text class="text-red " v-if="item.status == 2">不通过</text>
				</view>
				<view class="action">
					<button class="cu-btn round bg-green sm" :data-name="item.name"
					 :data-id="item.id" @click="addTwoClass">
						<text class="cuIcon-edit"></text> 修改
					</button>
				</view>
				
				<view class="action">
					<button class="cu-btn round bg-red sm" :data-id="item.id" @click="delUserClassify">
						<text class="cuIcon-delete"></text>删除
					</button>
				</view>
			</view>
			
			<view class="cu-item ">
			</view>
		</view>
		
		
		<view class="cu-modal" :class="showModal ? 'show' : ''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">说明</view>
					<view class="action" @click="clickShowModal(false)"><text class="cuIcon-close text-grey"></text></view>
				</view>
				<view class="padding-xl" style="text-align: left;background-color: white;">
					
					<view class="margin-top-sm">
						<text class="text-black">
							1. 二级分类用于用户端筛选功能，请创作者自行选择素材添加至二级分类中
						</text>
					</view>
					<view class="margin-top-sm">
						<text class="text-black">
							2. 每个一级分类下最多允许添加{{configs.length > 0 && configs[0].value != ''? configs[0].value : 8}}个二级分类
						</text>
					</view>
					<view class="margin-top-sm">
						<text class="text-black">
							3. 每次添加分类和修改分类名称都需要进行审核，审核时间间隔为3小时每次
						</text>
					</view>
				</view>
				<view class="cu-bar bg-white justify-end">
					<view class="action"><button class="" size="mini" @click="clickShowModal(false)" type="primary">我已知晓</button></view>
				</view>
			</view>
		</view>
		
		<view v-if="isShowModal">
			<view class="masking" v-if="isShowModal" style="background-color: rgba(0,0,0,.6)"></view>
			<view class="model-wraper">
				<view class="modal-title">
					{{modalTitle}}
				</view>
				<view class="modal-body">
					<input v-model="name"class="uni-input" maxlength="10" focus placeholder="请输入分类名称" />
				</view>
				<view>
					<view class="btn cancel" style="color:#666" @click="handleCancel">取消</view>
					<view class="btn confirm" style="color:#5999FF" @click="handleConfirm">确定</view>
				</view>
			</view>
		</view>
	
	
	</view>
</template>

<script>
	
	const util = require('../../utils/util.js');
	
	const http = require('../../utils/http.js');
	
	export default {
		data() {
			return {
				configs:[],
				showModal:false,
				clist: [],
				scrollLeft: 0,
				id:0,
				twoClassData:[],
				isShowModal :false,
				modalTitle:'添加分类',
				name:'',
				twoId:''
			}
		},
		onLoad: function (options) {
			util.getConfigs(this,"two_class_count");
		},
		onShow:function(){
			this.classifiList();
		},
		methods: {
			clickShowModal:function(bool){
				this.showModal = bool;
			},
			/**
			 * 分类
			 */
			tabSelect: function (e) {
			    let id = e.currentTarget.dataset.id;
			
			    if (this.id == id) {
			        return false;
			    }
			    this.setData({
			        id: id,
			    });
				this.userClassifiList();
			},
			classifiList: function () {
				uni.showLoading({
					title:'加载中'
				});
			    let that = this;
			    var params = {
			        url: '/classification/classifiList',
			        method: 'GET',
			        data: {},
			        callBack: function (res) {
			            that.setData({
			                clist: res.data,
			                id: res.data.length > 0 ? res.data[0].id : 0
			            });
						that.userClassifiList();
						uni.hideLoading();
			        }
			    };
			    http.request(params);
			},
			userClassifiList: function () {
				uni.showLoading({
					title:'加载中'
				});
			    let that = this;
			    var params = {
			        url: '/u/classify/userClassifiList',
			        method: 'GET',
			        data: {
						parentId: that.id
					},
			        callBack: function (res) {
						that.twoClassData = [];
						if(res.data.length > 0){
							that.twoClassData  = that.twoClassData.concat(res.data);
						}
						uni.hideLoading()
			        }
			    };
			    http.request(params);
			},
			addUserClassify: function () {
			    let that = this;
			    var params = {
			        url: '/u/classify/addUserClassify',
			        method: 'POST',
			        data: {
						parentId: that.id,
						name:that.name,
						id:that.twoId
					},
			        callBack: function (res) {
						if(res.code == 200){
							uni.showToast({
								title: that.twoId != '' ? '修改成功' : '添加成功',
								icon:'none'
							})
							that.name = '';
							that.isShowModal = false;
							setTimeout(function(){
								that.twoId = '';
								that.userClassifiList();
							},1000);
						}else{
							uni.showToast({
								title:res.msg,
								icon:'none'
							})
						}
			        }
			    };
			    http.request(params);
			},
			addTwoClass:function(e){
				let id = e.currentTarget.dataset.id;
				
				if(id == '' || id == undefined){
					this.modalTitle = '添加分类';
				}else{
					this.twoId = id;
					this.modalTitle = '修改分类';
					let name = e.currentTarget.dataset.name;
					this.name = name;
				}
				 this.isShowModal = true ;
			},
			// 点击取消
			handleCancel:function() {  //取消
			    this.name = '';// 清空数据
			    this.isShowModal = false ;// 关闭弹框
			},
			
			// 点击确定
			handleConfirm:function(){
				if(this.name.length <= 0) {  //是否输入内容
					uni.showToast({
						title:'请输入分类名称',
						icon:'none'
					})
					return;
				}
				this.addUserClassify();
			},
			delUserClassify:function(e){
				
				let id = e.currentTarget.dataset.id;
				let that = this;
				uni.showModal({
					title:'提示',
					content:'确定删除吗?',
					success(res) {
						if(res.confirm){
							var params = {
							    url: '/u/classify/delUserClassify/'+id,
							    method: 'get',
							    data: {
								},
							    callBack: function (res) {
									if(res.code == 200){
										uni.showToast({
											title:'删除成功',
											icon:'none'
										})
										that.name = '';
										setTimeout(function(){
											that.userClassifiList();
										},500);
									}else{
										uni.showToast({
											title:'删除失败',
											icon:'none'
										})
									}
							    }
							};
							http.request(params);
						}
					}
				})

			},
		}
	}
</script>

<style>
@import './classify.css';
</style>
